<script setup lang="ts">
import { ModalUtil } from '/@lib/utils/modal.ts'
import { useModalStatus } from '/@lib/hooks/useModalStatus.ts'
import { useLoading } from '/@lib/hooks/useLoading.ts'
import { useForm } from '/@lib/hooks/useForm.ts'
import { sys_device_type, sys_grant_type, sys_normal_disable } from '/@/const/Options.ts'
import { ApiSysClient } from '/@/api/system/sysClient'

const { loading, showLoading, hideLoading } = useLoading()
const { modalVisible, modalTitle, showModal, hideModal, setModalTitle } = useModalStatus()
const formRef = ref()
const { form, resetForm } = useForm({
  id: undefined,
  clientId: undefined,
  clientKey: undefined,
  clientSecret: undefined,
  grantTypeList: undefined,
  deviceType: undefined,
  activeTimeout: 1800,
  timeout: 604800,
  status: '0'
})
const formRules = {
  clientKey: [{ required: true, message: '客户端key不能为空', trigger: 'blur' }],
  clientSecret: [{ required: true, message: '客户端秘钥不能为空', trigger: 'blur' }],
  grantTypeList: [{ required: true, message: '授权类型不能为空', trigger: 'change' }],
  deviceType: [{ required: true, message: '设备类型不能为空', trigger: 'change' }]
}
const closeCancel = () => {
  formRef.value?.resetFields()
  resetForm()
  hideModal()
}
/** 打开 Modal 操作 */
const openAdd = async () => {
  showModal()
  setModalTitle('添加客户端')
}
const openEdit = async (row: any) => {
  Object.assign(form, row)
  showModal()
  setModalTitle('修改客户端')
}
defineExpose({ openAdd, openEdit })
const emit = defineEmits(['submit-success'])
/** 提交按钮 */
const submitForm = async () => {
  try {
    await formRef.value?.validate()
    showLoading()
    if (form.id) {
      await ApiSysClient.update(form)
    } else {
      await ApiSysClient.save(form)
    }
    ModalUtil.msgSuccess('操作成功')
    hideModal()
    emit('submit-success')
  } finally {
    hideLoading()
  }
}

const formItems = ref([
  {
    prop: 'clientKey',
    label: '客户端Key',
    attrs: {
      placeholder: '请输入客户端Key'
    }
  },
  {
    prop: 'clientSecret',
    label: '客户端密钥',
    attrs: {
      placeholder: '请输入客户端密钥'
    }
  },
  {
    prop: 'grantTypeList',
    label: '授权类型',
    slot: 'agel-select',
    attrs: {
      multiple: true,
      options: sys_grant_type
    }
  },
  {
    prop: 'deviceType',
    label: '设备类型',
    slot: 'agel-select',
    attrs: {
      options: sys_device_type
    }
  },
  {
    prop: 'activeTimeout',
    label: 'Token活跃超时时间',
    slots: {
      append: () => '秒'
    },
    attrs: {
      placeholder: '请输入Token活跃超时时间'
    }
  },
  {
    prop: 'timeout',
    label: 'Token固定超时时间',
    slots: {
      append: () => '秒'
    },
    attrs: {
      placeholder: '请输入Token固定超时时间'
    }
  },
  {
    prop: 'status',
    label: '状态',
    slot: 'agel-radio',
    attrs: {
      border: true,
      options: sys_normal_disable
    }
  }
])

</script>

<template>
  <!-- 添加或修改对话框 -->
  <el-dialog
    :title="modalTitle"
    v-model="modalVisible"
    width="50%"
    top="5vh"
    @close="closeCancel"
    append-to-body
    destroy-on-close
    :close-on-click-modal="false"
  >
    <el-form
      ref="formRef"
      v-loading="loading"
      :model="form"
      :rules="formRules"
      label-width="160px"
      label-position="right"
    >

      <AgelFormDesc :items="formItems" border :column="1"></AgelFormDesc>

      <!--      <el-form-item label="客户端key" prop="clientKey">-->
      <!--        <el-input v-model="form.clientKey" :disabled="form.id" placeholder="请输入客户端Key" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="客户端秘钥" prop="clientSecret">-->
      <!--        <el-input v-model="form.clientSecret" :disabled="form.id" placeholder="请输入客户端秘钥" />-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="授权类型" prop="grantTypeList">-->
      <!--        <el-select v-model="form.grantTypeList" multiple placeholder="请输入授权类型">-->
      <!--          <el-option v-for="dict in sys_grant_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="设备类型" prop="deviceType">-->
      <!--        <el-select v-model="form.deviceType" placeholder="请输入设备类型">-->
      <!--          <el-option v-for="dict in sys_device_type" :key="dict.value" :label="dict.label" :value="dict.value"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item prop="activeTimeout">-->
      <!--        <template #label>-->
      <!--            <span>-->
      <!--              <el-tooltip content="指定时间无操作则过期（单位：秒），默认30分钟（1800秒）" placement="top">-->
      <!--                <el-icon><question-filled /></el-icon>-->
      <!--              </el-tooltip>-->
      <!--              Token活跃超时时间-->
      <!--            </span>-->
      <!--        </template>-->
      <!--        <el-input v-model="form.activeTimeout" placeholder="请输入Token活跃超时时间">-->
      <!--          <template #append>秒</template>-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item prop="timeout">-->
      <!--        <template #label>-->
      <!--            <span>-->
      <!--              <el-tooltip content="指定时间必定过期（单位：秒），默认七天（604800秒）" placement="top">-->
      <!--                <el-icon><question-filled /></el-icon>-->
      <!--              </el-tooltip>-->
      <!--              Token固定超时时间-->
      <!--            </span>-->
      <!--        </template>-->
      <!--        <el-input v-model="form.timeout" placeholder="请输入Token固定超时时间">-->
      <!--          <template #append>秒</template>-->
      <!--        </el-input>-->
      <!--      </el-form-item>-->
      <!--      <el-form-item label="状态">-->
      <!--        <el-radio-group v-model="form.status">-->
      <!--          <el-radio v-for="dict in sys_normal_disable" :key="dict.value" :value="dict.value" border>-->
      <!--            {{ dict.label }}-->
      <!--          </el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->

    </el-form>

    <!-- 底部按钮 -->
    <template #footer>
      <div>
        <el-button @click="closeCancel">取消</el-button>
        <el-button :loading="loading" type="primary" @click="submitForm">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="scss"></style>
